import { Ref, useRef, useContext } from 'react';
import { Button, Select, Row, Col, Input, Form } from 'antd';

import { ApplyUpdateContext } from '../common/ApplyContext';

import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { onCloseModalCommon } from '@/utils';
import { NeedDictionaryService } from '@/pages/PurchaseManage/NeedManage/services/DictionaryService';
import { ApplyUpdateAPI } from '../common/type';

/**
 * @UpdateCancelModal 作废弹窗组件
 * @param form 表单实例
 * @param onSubmit 提交事件
 * @param onClose 关闭弹窗
 * @returns
 */
const UpdateCancelModal: React.FC<ApplyUpdateAPI.IUpdateCancelModal> = ({ form, onSubmit, onClose }) => {
  const { prefixCls } = useContext(ApplyUpdateContext);
  const { cancelTypeList } = NeedDictionaryService();
  const cancelModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * @onSave 保存事件
   */
  const onSave = async () => {
    await onSubmit();
    onCloseModalCommon(cancelModalRef);
  };

  const footerRender = () => {
    return (
      <>
        <Button onClick={() => onCloseModalCommon(cancelModalRef)}>取消</Button>
        <Button type={'primary'} onClick={onSave}>
          确认
        </Button>
      </>
    );
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={cancelModalRef}
      title={'作废申请'}
      width={550}
      onCancel={() => {
        onClose(false);
      }}
      footer={footerRender()}
      bodyStyle={{ padding: '5px 0px' }}
      centered
    >
      <div className={pageStyles['fromView-styles']}>
        <Row gutter={8} className={`${prefixCls}row`}>
          <Col span={24} className={`${prefixCls}row-col`}>
            <Form form={form}>
              <Form.Item
                label="作废类型"
                name="cancelType"
                rules={[
                  {
                    required: true,
                    message: '请选择作废类型',
                  },
                ]}
              >
                <Select
                  placeholder="请选择作废类型"
                  options={cancelTypeList}
                  fieldNames={{
                    label: 'name',
                    value: 'value',
                  }}
                />
              </Form.Item>
              <Form.Item label="作废原因" name="cancelReason" rules={[{ required: true, message: '请输入作废原因' }]}>
                <Input.TextArea placeholder="请输入作废原因" showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </div>
    </OneModal>
  );
};

export default UpdateCancelModal;
